<template>
  <div class="ditu">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <!-- <div>didid </div> -->
    <div id="baidumap"></div>
    <div class="demo">
      房屋状态：
      <ul>
        <li>
          <img src="@/assets/icon/blue.png" alt />
          <span>当前</span>
        </li>
        <li>
          <img src="@/assets/icon/yellow.png" alt />
          <span>申请中</span>
        </li>
        <li>
          <img src="@/assets/icon/green.png" alt />
          <span>建造中</span>
        </li>
        <li>
          <img src="@/assets/icon/red.png" alt />
          <span>已完工</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// nginx服务器重启   服务器根节点下  .\nginx.exe -s reload
import api from "@/api/api.js";

import red from "@/assets/icon/red.png";    // 已完工
import yellow from "@/assets/icon/yellow.png";   // 申请中
import blue from "@/assets/icon/blue.png";    // 当前
import green from "@/assets/icon/green.png";    // 建造中

export default {
  name: "ditu",
  data() {
    return {
      obj: null,
      map: null,
      id: this.$route.params.id,
      type: this.$route.params.type,
    };
  },
  mounted() {
    this.init();
    // this.baiduMap();
  },
  methods: {
    async init() {
      var map = new BMap.Map("baidumap"); // 创建地图实例
      this.map = map;

      // this.map.setViewport('昆山市');
      // return
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      // map.clearOverlays();
      console.log(this.id, this.type);
      if (this.type == "all") {
        var obj = await this.getInfor("");
        console.log(obj);
        for (let i = 0; i < obj.length; i++) {
          this.addMarker(obj[i]);
        }
      } else {
        var obj = await this.getInfor(this.id);
        this.addMarker(obj);
      }
      this.map.removeOverlay(this.map.getOverlays()[0]);
      // for(let i = 0; i < this.map.getOverlays().length ; i ++){
      //   if(this.map.getOverlays()[i].type !== '位点'){
      //     this.map.removeOverlay(this.map.getOverlays()[i])
      //   }
      // }
      // console.log(this.map.getOverlays())
      // this.map.setViewport(this.map.getOverlays());
      map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP],
          anchor: BMAP_ANCHOR_BOTTOM_RIGHT, // 不能设置为左下角   因为设置的定位是会设置到类名上去
          // 然后百度地图自己的标志和版权  刚好是左下角的    所以地图类型设置为左下角的话  会被隐藏
          offset: new BMap.Size(20, 40),
        })
      );

      map.setMapStyleV2({
        styleId: "d99fa69ac66bd323f0e29cafa473f46a",
      });
    },
    addMarker(obj) {
      // console.log(obj)
      var point = new BMap.Point(obj.x, obj.y); // 创建点坐标
      let dot;
      // if (obj.status == '在建') {
      // 	dot = green
      // }
      switch (obj.status) {
        case "在建":
          dot = green;
          break;
        case "已建":
          dot = red;
          break;
        case "申请中":
          dot = yellow;
          break;
      }
      // 查找当前对象
      if (this.id == obj.id) dot = blue;  
      var myIcon = new BMap.Icon(dot, new BMap.Size(20, 30)); // 设置的icon大小      // 不能直接写图片的地址   需要先引入再使用
      // var myIcon = new BMap.Icon(icon, {w: 30, h: 44});
      myIcon.setImageSize(new BMap.Size(20, 30)); // 设置背景图片的大小
      var marker = new BMap.Marker(point, {
        icon: myIcon,
      }); // 创建标注
      marker.type = "位点";
      this.map.addOverlay(marker); // 将标注添加到地图中

      // this.map.setViewport(this.map.getOverlays());

      this.map.centerAndZoom(point, 19); // 初始化地图，设置中心点坐标和地图级别

      let sContent = `<div class="siteInfo" style="width: 300px;">
					<h3>户主：${obj.name}</h3>
					<p style="width: 96%;"><span>地址</span>:&emsp;${obj.village || ""} ${
        obj.address || ""
      }</p>
					<p style="width: 96%;"><span>结构类型</span>:&emsp;${obj.structure || ""}</p>
					<p style="width: 96%;"><span>门牌地址</span>:&emsp;${obj.doorno || ""}</p>
					<p style="width: 96%;"><span>工程状态</span>:&emsp;${
            obj.projectstatus || ""
          }</p>
					<p style="width: 96%;"><span>房型</span>:&emsp;${obj.housetype || ""}</p>
					<p style="width: 96%;"><span>建筑面积</span>:&emsp;${
            obj.builddingarea || ""
          }㎡</p>
					<p style="width: 96%;"><span>用地面积</span>:&emsp;${obj.landarea || ""}㎡</p>
					<p style="width: 96%;"><span>用地批准文号</span>:&emsp;${obj.landno || ""}</p>
					<p style="width: 96%;"><span>施工单位名称</span>:&emsp;${obj.builder || ""}</p>
					<p style="width: 96%;"><span>资质等级</span>:&emsp;${obj.builderlevel || ""}</p>
					<p style="width: 96%;"><span>项目经理</span>:&emsp;${
            obj.projectmanager || ""
          }</p>
					</div>
					`;

      // 提示信息
      var infoWindow = new BMap.InfoWindow(sContent);

      // 鼠标移上标注点要发生的事
      marker.addEventListener("mouseover", function () {
        this.openInfoWindow(infoWindow);
      });

      // 鼠标移开标注点要发生的事
      marker.addEventListener("mouseout", function () {
        this.closeInfoWindow(infoWindow);
      });

      // 鼠标点击标注点要发生的事
      marker.addEventListener("click", function () {
        window.open(
          "http://house.ksljz.cn:8081/house/house/houseBase/get.do?id=" +
            obj.id,
          "_blank"
        );
      });
    },

    async baiduMap() {
      var map = new BMap.Map("map"); // 创建地图实例
      this.map = map;
      // 三种路由形式
      // 只要一个点的       /id/none
      // 全部点位的    但根据个体的建造情况分不同的炮点渲染    /none/all
      // 当前点位和全部点位的    当前点位特殊颜色  根据个体的建造情况分不同的炮点渲染   /id/all
      // 申请中  绿色      建造中 橙色      完工   蓝色
      var obj = await this.getInfor(); // 拿到数据
      var point = new BMap.Point(obj.x, obj.y); // 创建点坐标
      map.centerAndZoom(point, 19); // 初始化地图，设置中心点坐标和地图级别
      var marker = new BMap.Marker(point); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

      map.addControl(new BMap.NavigationControl());
      map.addControl(new BMap.ScaleControl());
      map.addControl(new BMap.OverviewMapControl());
      map.addControl(new BMap.MapTypeControl());
      //map.setMapStyle({ style: 'midnight' }) //地图风格
      // console.log(map.getOverlays())

      // let sContent =
      // 	`<div class="siteInfo" style="width: 300px;">
      // 	<h3>户主：${obj.name}</h3>
      // 	<p style="width: 96%;"><span>地址</span>:&emsp;${obj.village} ${obj.address}</p>
      // 	<p style="width: 96%;"><span>结构类型</span>:&emsp;${obj.structure}</p>
      // 	<p style="width: 96%;"><span>门牌地址</span>:&emsp;${obj.doorno}</p>
      // 	<p style="width: 96%;"><span>工程状态</span>:&emsp;${obj.projectstatus}</p>
      // 	<p style="width: 96%;"><span>房型</span>:&emsp;${obj.housetype}</p>
      // 	<p style="width: 96%;"><span>建筑面积</span>:&emsp;${obj.builddingarea}㎡</p>
      //       <p style="width: 96%;"><span>用地面积</span>:&emsp;${obj.landarea}㎡</p>
      // 	<p style="width: 96%;"><span>用地批准文号</span>:&emsp;${obj.landno}</p>
      //       <p style="width: 96%;"><span>施工单位名称</span>:&emsp;${obj.builder}</p>
      //       <p style="width: 96%;"><span>资质等级</span>:&emsp;${obj.builderlevel}</p>
      //       <p style="width: 96%;"><span>项目经理</span>:&emsp;${obj.projectmanager}</p>
      //       </div>
      // 	`

      // // 提示信息
      // var infoWindow = new BMap.InfoWindow('didi');

      // // 鼠标移上标注点要发生的事
      // marker.addEventListener("mouseover", function() {
      // 	this.openInfoWindow(infoWindow);
      // });

      // // 鼠标移开标注点要发生的事
      // marker.addEventListener("mouseout", function() {
      // 	this.closeInfoWindow(infoWindow)
      // });
    },
    getInfor(id) {
      // console.log(this.$route.params.id)
      // eac4704a691c4e339378a2764bccb8a1
      return new Promise((resolve, reject) => {
        api.getInfor(id).then((res) => {
          //   console.log(res.data.jsonData);
          // this.obj = res.data.jsonData[0];
          if (id) {
            resolve(res.data.jsonData[0]);
          } else {
            resolve(res.data.jsonData);
          }
        });
      });
    },
  },
  created() {
    // console.log(this.$route)
  },
};
</script>

<style lang="scss" scoped>
.ditu {
  position: relative;
  #baidumap {
    width: 100%;
    height: 100vh;
  }
  .demo {
    position: absolute;
    top: 30PX;
    left: 50PX;
    padding: 0 10Px;
    width: 100PX;
    border: 1PX solid #ccc;
    text-align: left;
    font-weight: 600;
    font-size: 14PX;
    background: #fff;
    ul {
      list-style: none;
      li {
        height: 50PX;
        line-height: 50PX;
        img {
          display: inline-block;
          vertical-align: middle;
          margin-right: 10PX;
          width: 21PX;
          height: 30PX;
        }
        span {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.anchorBL {
  display: none;
}
</style>
